<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Image files</title>
<link href="tutor.css" title="Tutor Style" type="text/css" rel="stylesheet" />
<link href="tutor_bw.css" title="Black and white" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="topbar">
<img alt="" src="maths.gif" class="titleimage"/>
<span class="title">Playing with images</span>
</div>
<div id="navbar">
<span class="heading">Crunchy user tutorial</span>
<a href="welcome_en.html">Begin tutorial</a>
<a href="interpreter_en.html">Interpreter</a>
<a href="editor_en.html">Editor</a>
<a href="doctest_en.html">DocTest</a>
<a href="canvas_en.html">Graphics</a>
<a href="images_en.html">Image files</a>
<a href="external_en.html">External applications</a>
<span class="heading">Advanced Topics</span>
<a href="remote_en.html">Browsing</a>
<a href="config_en.html">Configuring Crunchy</a>
<a href="faq_en.html">FAQ, bugs, etc.</a>
<a href="writing_en.html">Writing tutorials</a>
<a href="/functional_tests">Tests</a>
</div>
<div id="main">
<h3 class="crunchy">Dynamically inserting images into a page</h3>
<p>Crunchy allow a user to insert one or more images interactively below
an interpreter or any other elements.  The technique used to do this kind of
web page transformation is known as <i>dynamic html</i> or <i>dhtml</i> for short.
You need to import the <code>dhtml.py</code> module to do this within
Crunchy.
</p>
<pre title="interpreter">
import dhtml
dhtml.image("../crunchy-python-powered.png", width=457, height=83)
</pre
<p>
The above image has been loaded from a location given relative to the current 
html file being displayed, always assumed to be from the basic server.  
To load other images, you will need to specify the absolute path.  Since
I do not know the path of interesting images on your computer, 
I'll give you another one to try.
</p>
<pre title="interpreter">
dhtml.image("http://imgs.xkcd.com/comics/python.png")
</pre>
<p>
By default, Crunchy displays images with a width and height of 400 pixels each.
As you have seen in the first example, you can specify other parameters for
the image.
</p>
<p>Crunchy can also work with modules that generate images 
to display them dynamically within the browser.  To
help you with locating images, Crunchy defines two
locations on your computer: your home directory and the Crunchy temporary
directory.

The following example
assumes that matplotlib is installed; if it's not, you're out of luck!</p>
<pre title="editor">
import dhtml
image_file = dhtml.join_path(dhtml.home, "foo.png")

# assumes matplotlib is installed
import matplotlib.numerix as nx
import pylab

def boltzman(x, xmid, tau):
    """
    evaluate the boltzman function with midpoint 
    xmid and time constant tau over x
    """
    return 1. / (1. + nx.exp(-(x-xmid)/tau))

def fill_below_intersection(x, S, Z):
    """
    fill the region below the intersection of S and Z
    """
    #find the intersection point
    ind = nx.nonzero( nx.absolute(S-Z)==min(nx.absolute(S-Z)))[0]
    # compute a new curve which we will fill below
    Y = nx.zeros(S.shape, typecode=nx.Float)
    Y[:ind] = S[:ind]  # Y is S up to the intersection
    Y[ind:] = Z[ind:]  # and Z beyond it
    pylab.fill(x, Y, facecolor='blue', alpha=0.5)

x = nx.arange(-6, 6, .01)
S = boltzman(x, 0, 1)
Z = 1-boltzman(x, 0.5, 1)
pylab.plot(x, S, x, Z, color='red', lw=2)
fill_below_intersection(x, S, Z)

pylab.savefig(image_file)
dhtml.image(image_file)
</pre>
<div class="notes">
<h4>Suggestions?</h4>
<p> If you have some suggestions for libraries other than matplotlib that generate
images and could be showcased by Crunchy, let us know.
</p>
</div>

<h3 class="crunchy">Advanced dhtml</h3>
<p>More to write</p>
<pre title="editor">
# comprehensive example

import dhtml
import time

delay = 0.5
long_delay = 2

def countdown(message):
    dhtml.append("span", label="message", attributes={'innerHTML':message})
    time.sleep(delay)
    dhtml.append("span", label="message", attributes={'innerHTML':message+" ."})
    time.sleep(delay)
    dhtml.append("span", label="message", attributes={'innerHTML':message+" .."})
    time.sleep(delay)
    dhtml.append("span", label="message", attributes={'innerHTML':message+" ...."})
    time.sleep(long_delay)

def generic(file_path, position):
    return dhtml.image(file_path, width=32, height=32, 
                      label="b_%s"%position, parent_label=position)
def blue(position):
    return generic("../normal.png", position)

def green(position):
    return generic("../trusted.png", position)

def red(position):
    return generic("../paranoid.png", position)

def gold(position):
    return generic("../severe.png", position)

def ok(position):
    return generic("../ok.png", position)

def warning(position):
    return generic("../warning.png", png)

dhtml.append("br") # start on a new line

countdown("Inserting a table with one row")
dhtml.append("table", label="table")
dhtml.append("tr", label="row1", parent_label="table")
dhtml.append("td", label="1_1", parent_label="row1")
dhtml.append("td", label="1_2", parent_label="row1")
dhtml.append("td", label="1_3", parent_label="row1")
red("1_1")
red("1_2")
red("1_3")

countdown("Changing first element")
ok("1_1")
countdown("Changing second element")
ok("1_2")
countdown("Changing third element")
ok("1_3")

countdown("Adding a second row")
dhtml.append("tr", label="row2", parent_label="table")
dhtml.append("td", label="2_1", parent_label="row2")
dhtml.append("td", label="2_2", parent_label="row2")
dhtml.append("td", label="2_3", parent_label="row2")
red("2_1")
red("2_2")
red("2_3")

countdown("Adding a third row")
dhtml.append("tr", label="row3", parent_label="table")
dhtml.append("td", label="3_1", parent_label="row3")
dhtml.append("td", label="3_2", parent_label="row3")
dhtml.append("td", label="3_3", parent_label="row3")
blue("3_1")
blue("3_2")
blue("3_3")

countdown("Removing the second row")
dhtml.remove("row2")

# notice how elements are only appended...
countdown("Appending a new row")
dhtml.append("tr", label="row2", parent_label="table")
dhtml.append("td", label="2_1", parent_label="row2")
dhtml.append("td", label="2_2", parent_label="row2")
dhtml.append("td", label="2_3", parent_label="row2")
red("2_1")
red("2_2")
red("2_3")

</pre>

<p>
Some more explanation will follow.
<br/>
<br/><br/><br/><br/><br/><br/><br/>
</p>




</div>
</body>
</html>